<div id="trafficAnalysisModal" class="modalDialog" style="width: 900px; left: -300px; margin-left: 0;">
    <h1>Traffic Analyzer</h1>
    <form name="trafficAnalysisForm" novalidate>
        <div class="dialogContent" style="height: 600px;">
            <div class="toolbar">
                <div>
                    <select id="applicationNameChoice" ng-model="data.applicationName" ng-options="applicationName for applicationName in appNames" ng-change="onSelectAppName()" ng-if="appNames.length > 1">
                        <option value="">Select an Application</option>
                    </select>
                    <span style="font-weight: bold; top: 2px; position: relative;" ng-if="appNames.length === 1">{{appNames[0]}}</span>
                </div>
            </div>
            <div style="height: 460px;">
                <div ng-show="data.applicationName !== null && data.applicationName !== ''">
                    <div style="margin-bottom: 10px;">
                        <select id="experimentNameChoice" ng-model="data.selectedExperiment" ng-options="experimentName for experimentName in experimentNames" ng-change="initialExperimentSelected()">
                            <option value="">Select an Experiment</option>
                        </select>
                    </div>
                    <div style="width: 19%; float: left; margin-bottom: 10px;">
                        <label>Start Date</label>

                        <div ng-show="!readOnly" class="col-md-7" style="margin-left:-17px">
                            <p class="input-group">
                                <input date-picker type="text" id="startTime" name="startTime" ng-model="data.startTime"/>
                                <div class="error"
                                     ng-show="(trafficAnalysisForm.startTime.$dirty && trafficAnalysisForm.startTime.$invalid &&
                                              !trafficAnalysisForm.startTime.$focused) || trafficAnalysisFormSubmitted">
                                    <small class="fieldError"
                                           ng-show="trafficAnalysisForm.startTime.$error.required">
                                        Experiment starting date required.
                                    </small>
                                    <small class="fieldError"
                                           ng-show="trafficAnalysisForm.startTime.$error.time">
                                        Invalid starting date.
                                    </small>
                                </div>
                            </p>
                        </div>
                        <span ng-show="readOnly">{{data.startTime | date:'M/d/yyyy a'}}</span>
                    </div>
                    <div style="width: 39%; float: left;">
                        <label>End Date</label>

                        <div ng-show="!readOnly" class="col-md-7" style="margin-left:-17px">
                            <p class="input-group">
                                <input date-picker type="text" id="endTime" name="endTime" ng-model="data.endTime"/>

                                <!-- Validation error -->
                                <div class="error"
                                     ng-show="(trafficAnalysisForm.endTime.$dirty && trafficAnalysisForm.endTime.$invalid) || trafficAnalysisFormSubmitted">
                                    <small class="fieldError"
                                           ng-show="trafficAnalysisForm.endTime.$error.ensureStartGreaterEndTime">
                                        End date must be greater than start date.
                                    </small>
                                </div>
                            </p>
                        </div>
                        <span ng-show="readOnly">{{data.endTime | date:'M/d/yyyy a'}}</span>
                        <button id="btnTrafficAnalysisRefresh" class="cancel" onclick="return false;" ng-click="refresh();">Refresh</button>
                    </div>
                    <div class="tableContainer" style="margin-top: 10px; overflow: auto; height: 350px; clear: both;">
                        <table>
                            <thead>
                                <tr>
                                    <th ng-repeat="name in columnNames">{{name}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="nextRow in dataRows">
                                    <td ng-repeat="nextItem in nextRow track by $index">{{nextItem}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="buttonBar">
                <button id="btnTrafficAnalysisClose" class="blue cancel" onclick="return false;" ng-click="cancel();">Close</button>
            </div>
        </div>
    </form>
</div>
